<template>
  <div class="headerwrap">
    <!--商家信息-->
    <!--@click 添加事件 弹窗的显示和关闭  -->
    <div class="top" @click="showDetail">
      <div class="wrap">
        <!--商家logo-->
        <div class="left">
          <img :src="seller.avatar" alt="" width="64" height="64">
        </div>
        <!--商家店铺信息-->
        <div class="right">
          <div class="name">
            <img src="../../../resource/img/brand@3x.png" alt="" width="45" height="27">
            <span>{{seller.name}}</span>
          </div>
          <p class="desc">{{seller.description}}/{{seller.deliveryTime}}分钟到达</p>
          <!--v-if 如果没有这个元素就不会解析 那么不会报错了-->
          <div class="preferential" v-if="seller.supports">
            <span class="icon" :class="classMap[seller.supports[0].type]"></span>
            <span class="text">{{seller.supports[0].description}}</span>
          </div>
          <div class="num">{{seller.supports.length}}个 &gt;</div>
        </div>
      </div>
    </div>
    <!--公告-->
    <div class="annonce"><i class="icon"></i><span class="bulletin">{{seller.bulletin}}</span><b>&gt;</b></div>
    <!--模糊背景-->
    <div class="bgimg">
      <img :src='seller.avatar' alt="">
    </div>
    <!--店铺详细信息弹窗-->
    <!--transition  设置动画  name是fade 有fade-enter，fade-leave，fade-enter-active，fade-leaver-active-->
    <transition name="fade">
      <div class="model" v-show="detailShow">
        <div class="storeName">
          <p>{{seller.name}}</p>
        </div>
        <div class="star-wrap">
          <star :size="48" :score="seller.score"></star>
        </div>
        <h1 class="tit"><i class="line"></i>优惠公告 <i class="line"></i></h1>
        <ul class="youhui">
          <!--v-for循环  index自带的下标-->
          <li v-for="(item,index) in seller.supports"><i class="icon" :class="classMap[seller.supports[index].type]"></i><span>{{seller.supports[index].description}}</span>
          </li>
        </ul>
        <h1 class="tit"><i class="line"></i>商家公告<i class="line"></i></h1>
        <div class="annontxt">{{seller.bulletin}}</div>
        <!--设置事件用@-->
        <div class="close-btn" @click="hideDetail"></div>
      </div>
    </transition>
  </div>

</template>

<script type="text/ecmascript-6">
  import star from '../../components/star/star.vue';
  const ERR_OK = 0;
  export default{
    props: {
      seller: {
        type: Object
      }
    },
    data (){
      return {
        detailShow: false
      }
    },
//    设置事件
    methods: {
      showDetail(){
        this.detailShow = true
      },
      hideDetail(){
        this.detailShow = false
      }
    },
    created(){
      this.classMap = ['decrease', 'discount', 'guarantee', 'invoice', 'special']
    },
    components: {
      star
    }
  }
</script>

<style type="text/css">
  .headerwrap{position: relative;z-index: 20}
  /*商家*/
  .top{width: 100%; height: 80px; padding-top: 24px; background-color:rgba(7,17,27,0.5);}
  .top .wrap{width: 100%; clear: both; overflow: hidden;}
  .top .left{float: left; margin: 0px 16px 16px 24px;}
  .top .left img{border-radius: 2px;}
  .top .right{display: block; height: 27px; float: left; position: relative;}
  .top .right img{margin-right: 5px; float: left;}
  .top .right .name span{font-size: 20px; color: #fff; font-weight: bold; line-height: 27px;}
  .desc{width: 100%; height: 24px; line-height: 24px; font-size: 16px; color: #fff; font-weight: 200;}
  .preferential{display: block; width: 100%; height: 24px;}
  .preferential .icon{display: inline-block; width: 24px; height: 24px; float: left;}
  .decrease{ background: url(../../../resource/img/decrease_1@2x.png);}
  .discount{ background: url(../../../resource/img/discount_1@2x.png);}
  .guarantee{ background: url(../../../resource/img/guarantee_1@2x.png);}
  .invoice{ background: url(../../../resource/img/invoice_1@2x.png);}
  .special{ background: url(../../../resource/img/special_1@2x.png);}
  .text{line-height: 24px; display: inline-block; float: left; color: #fff; font-size: 14px;}

  /*公告*/
  .annonce{width: 90%; height:30px; padding:0 5%; line-height:30px; font-size: 16px; color: #fff; background-color:rgba(7,17,27,0.7);}
  .annonce .bulletin{display: inline-block; float: left; width: 80%; height:30px; margin: 0 8px; line-height:30px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;font-size: 12px;}
  .annonce i{display: inline-block; float: left; width:33px; height:18px; background:url(../../../resource/img/bulletin@3x.png) no-repeat; background-size:33px 18px; margin-top: 7px;}
  .right .num{width: 50px; height: 26px; border-radius:13px; color: #fff; position: absolute; right:-10px; bottom:-40px; line-height:26px; font-size: 14px; background-color:rgba(7,17,27,0.2); text-align: center;}

  /*模糊背景*/
  .bgimg{position: absolute;width: 100%;top:0;left:0;z-index:-1;filter: blur(10px);height:134px;overflow: hidden;}
  .bgimg img {width: 100%;}

  /*店铺信息弹窗*/
  /*弹窗显示隐藏过度的效果*/
  .fade-enter-active,.fade-leave-active {transition: all 0.5s ease;}
  .fade-enter-active{opacity:1;background-color:rgba(7,17,27,0.8);backdrop-filter:blur(7px);}
  .fade-leave-active{opacity:0;backdrop-filter:blur(0px);}
  .fade-enter{opacity:0;backdrop-filter:blur(0px);}
  .model{width: 100%;height: 100%;position:fixed;top:0;overflow: auto; background-color:rgba(7,17,27,0.8);z-index: 100;backdrop-filter:blur(7px);}
  .model .storeName{width: 100%;height: 20px;margin-bottom: 16px;}
  .model .storeName p{line-height:20px;font-size: 16px;color: #fff;margin-top: 64px;font-weight:bold;text-align: center;}
  .model .star-wrap{width: 100%;height: 24px;margin-bottom: 18px;text-align: center;;}
  .model .tit{width: 90%;height:16px;font-size: 16px;padding:5% 5%;text-align:center;color:#fff;}
  .model .tit .line{display: inline-block;width:30%;height:1px;vertical-align: middle;background-color:rgba(255,255,255,0.2);margin:0 2%;}

  .youhui{margin: 10px 0;margin-left:10%;}
  .youhui li{height:24px;padding:3px 0;}
  .youhui .icon{display: inline-block;width:24px;height:24px;float: left;margin:0px 10px;}
  .youhui span{display: inline-block;line-height:24px;font-size: 14px;color: #fff;}
  .model .annontxt{width: 80%;margin:0 auto;color: #fff;font-size: 12px;line-height:24px;font-weight: 200;}
  .model .close-btn{font-size: 24px;color: #fff;display: block;width: 40px;line-height:40px;height:40px;text-align: center;margin: 20px auto;background:url(close.png) no-repeat;background-size:25px 25px;}

  @media only screen and (max-width: 321px){
    .top .left{float: left; margin: 0px 8px 8px 12px;}
    .right .num{
      right:0;
    }
  }
</style>
